<template>
  <div id="app4">
    <div class="box1">
      <!--      指定一个搜索框 , 来搜索用户-->
      <div class="box2">
        <div class="box3">
          <label>
            <span>输入要搜索的用户账号</span>
            <input
              type="text"
              v-model="userids"/>
          </label>
        </div>
        <!--        指定一个按钮 , 来查询用户-->
        <div class="send-btn-class">
          <el-button
            class="bu1"
            circle
            @click="query"
            type="primary"
            icon="el-icon-s-promotion"
            size="medium"
          ></el-button>
        </div>
      </div>
      <!--      下面来显示用户搜索到的数据 , 如果搜索到的用户 , 则展示 , 否则不展示-->
      <div class="box4" v-if="this.pageuser.showid">
        <!--        显示用户的头像 , 名字-->
        <div class="box5">
          <el-avatar shape="square" :size="100" :src="this.pageuser.showimage">头像</el-avatar>
        </div>
        <!--    指定一个容器 , 来使用表单的方法来指定用户的备注 , 微信号 等等 , 信息-->
        <div class="box6">
          <tr>
            <td class="td1">昵 称</td>
            <td class="left">{{ this.pageuser.showname }}</td>
          </tr>
          <tr>
            <td class="td1">账 号</td>
            <td class="left">{{ this.pageuser.showid }}</td>
          </tr>
        </div>

        <div class="box7">
          <label v-show="reveal">
            <span>请添加好友描述</span>
            <input
              type="text"
              v-model="textarea2"
              maxlength="20"
            />
          </label>
        </div>
        <div v-if="reveal">
          <!--        指定一个添加好友的按钮-->
          <el-button
            class="but2"
            type="primary"
            @click="addRequest"
            v-loading.fullscreen.lock="fullscreenLoading">
            添加 好友
          </el-button>
        </div>
        <div v-else>
          <!--          指定 一个聊天的按钮-->
          <el-button class="but2" type="paimary">发送 消息</el-button>
        </div>
      </div>

      <div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      fullscreenLoading: false,
      frienindex: 0,
      //默认为展示添加好友
      reveal: true,
      textarea2: '',
      //当前搜索的用户账号
      userids: '',
      //  搜索到的用户 ,
      pageuser: {
        showimage: '',
        showid: '',
        showname: '',
      }
    }
  },
  methods: {
    //发送好友请求的函数 ,
    addRequest() {
      //  向服务端 , 发送请求 , 获取要搜索的用户的信息
      this.$store
        .dispatch("user/addRequest", {
          id: this.pageuser.showid,
          name: this.textarea2
        })
        .then(() => {
          //数据 , 请求成功
          this.pageuser.showid = "";
          this.textarea2 = '';
          this.userids = '';
          this.$message({message: '恭喜你，好友信息 , 发送成功!', type: 'success'});
          return true;
        })
        .catch((error) => {
          console.log("添加用户失败" + error);
          this.loading = false
        })
    },
    //  查询用户的方法 , 首先到用户的朋友列表 , 查询到用户 , 如果用户列表不存在用户 , 则到服务端进行请求数据
    query() {
      if (!/^1[3-9]\d{9}$/.test(this.userids)) {
        this.$message({message: '警告哦，输入的账号 , 不合法!', type: 'warning'});
        return true;
      } else if (this.id === this.userids) {
        //跳转路由到个人中心页面
        this.$message({message: '警告哦，请到个人中心中查看自己!', type: 'warning'});

        console.log(this.redirect);
        //跳转路由 , 到个人中心页面
        this.$router.push({path: '/Person/Person'})
        return true;
      } else {
        //到朋友列表里面 , 进行判断 , 此用户 , 是否在自己的朋友列表 , 如果存在自己的朋友列表 , 则不能进行添加好友
        for (var i = 0; i < this.friends.length; i++) {
          if (this.friends[i].id == this.userids) {
            //  则把朋友列表的详细信息展示到搜索里面
            this.pageuser.showimage = this.friends[i].url;
            this.pageuser.showid = this.friends[i].id;
            this.pageuser.showname = this.friends[i].name;
            this.reveal = false; //指定为聊天模式
            this.frienindex = i;
            return;
          }
        }
      }
      //  向服务端 , 发送请求 , 获取要搜索的用户的信息
      this.$store
        .dispatch("user/seekUser", this.userids)
        .then(dat => {
          this.pageuser.showimage = dat.user.avater;
          this.pageuser.showid = dat.user.id
          this.pageuser.showname = dat.user.name
          this.reveal = true; //指定为加好友模式
          return true;
        })
        .catch((error) => {
          console.log("搜索失败" + error);
          this.loading = false
        })
    }
  },
  computed: {
    ...mapGetters(['id', 'friends'])
  },
  mounted: function () {
    //初始化WebSocket对象
    this.$store
      .dispatch("user/initWebSocket")

    //  向服务端 , 进行请求,  当前用户的朋友列表 , 以及朋友的详细信息 , 以及聊天记录 , 等等
    this.$store
      .dispatch("user/getFriends")
      .then(() => {
        console.log("朋友列表 , 展示成功");
      })
      .catch((error) => {
        console.log("用户的朋友列表 , 展示失败" + error);
      })
  }
}
</script>

<style scoped>

.box7 {
  padding-top: 30px;
  padding-bottom: 60px;
}

.box6 td {
  /*  设置字体 , 靠左*/
  text-align: left;
}

.box6 {
  padding-top: 10px;
  height: 100px;
}

.left {
  /*  设置左外边距*/
  padding-left: 40px;
}

/*设置上边距*/
.td1 {
  padding-top: 13px;
  /*设置字体的颜色*/
  color: #999999;
}

.box5 {
  float: left;
  padding-left: 35%;
  height: 100px;
  padding-right: 50px;
}

.box4 {
  margin-top: 10px;
  height: 350px;
  text-align: center;
}

.bu1 {
  background-color: #b3d8ff;
}

.send-btn-class {
  display: inline-block;
  text-align: center;
}

.box3 {
  display: inline-block;
  /*字体居中*/
  text-align: center;
  /*  使DIV居中*/
  margin: 0 auto;
}

.box2 {
  padding-top: 10%;
  padding-bottom: 50px;
  /*居中对齐*/
  text-align: center;
}

.span1 {
  height: 50px;
  line-height: 50px;
  padding-bottom: 30px;
}

label span {
  font-size: 15px;
  color: #909399;
  text-transform: uppercase;
}

.box1 {
  height: 100%;
  width: 80%;
  border-top: 2px solid #b0b0b0;
  margin: 0 auto;
  margin-top: 50px;


}

input {
  border: none;
  outline: none;
  background: none;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  display: block;
  padding-bottom: 5px;
  padding-top: 10px;
  font-size: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  text-align: center;
  width: 333px;
  margin: 0 auto;
}

.but2 {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 36px;
  border-radius: 30px;
  color: #fff;
  font-size: 15px;
  background-color: #d4af7a;
  border: 0px;
}
</style>

